<template>
	<container-query @change="handleChange" :query="query" v-model="params">
		<a-form layout="inline" :form="form" :labelCol="{ span: 1 }" :wrapperCol="{ span: 18 }">
			<a-row :gutter="24" type="flex">
				<a-col flex="1">
					<a-row :gutter="24">
						<a-col v-bind="screen" v-for="(item, index) in fieldList.slice(0, len)" :key="item.value">
							<a-form-item :label="hasLabel ? item.text : ''">
								<a-input-number allowClear v-if="item.type == 'int' || item.type == 'number'" v-decorator="[item.value]" :min="1" class="w100 flex-1" />
								<j-date
									v-else-if="item.type == 'date'"
									v-decorator="[item.value, { trigger: 'change' }]"
									placeholder="请选择日期"
									class="w100 flex-1"
									date-format="YYYY-MM-DD"
								></j-date>
								<j-date
									v-else-if="item.type == 'datetime'"
									v-decorator="[item.value, { trigger: 'change' }]"
									placeholder="请选择时间"
									:show-time="true"
									date-format="YYYY-MM-DD HH:mm:ss"
									class="w100 flex-1"
								></j-date>
								<j-date
									v-else-if="item.type == 'month'"
									v-decorator="[item.value, { trigger: 'change' }]"
									placeholder="请选择月份"
									:show-time="true"
									date-format="YYYY-MM"
									class="w100 flex-1"
								></j-date>
								<a-range-picker
									:allowClear="item.allowClear == undefined ? true : item.allowClear"
									v-else-if="item.type == 'rangeDate'"
									:disabledDate="disabledDate"
									v-decorator="[item.value]"
									:placeholder="[`${item.text}开始`, `${item.text}结束`]"
									:ranges="{ 今天: [moment(), moment()], 本月: [moment().startOf('month'), moment()] }"
									class="w100 flex-1"
								/>

								<a-select
									:placeholder="`请选择${item.text}`"
									v-else-if="item.type == 'select'"
									v-decorator="[item.value]"
									class="w100 flex-1"
									showSearch
									allowClear
									:filter-option="filterOption"
									:mode="item.multiple ? 'multiple' : 'default'"
									@change="e => changeSelect(e, item.value, item)"
								>
									<a-select-option :value="sel.value" v-for="(sel, $subindex) in item.optionlist">{{ sel.text }}</a-select-option>
								</a-select>
								<!-- <a-tree-select v-else-if="item.type == 'treeSelect'" showSearch v-decorator="[item.value]" :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
								 :placeholder="`请选择${item.text}`" allowClear :mode="item.multiple ? 'multiple' : 'default'" treeDefaultExpandAll @change="onChange" @search="onSearch"
								 @change="e => changeSelect(e, item.value, item)" :treeData="item.optionlist" :replaceFields="replaceFields">
								</a-tree-select> -->
								<a-tree-select
									:placeholder="`请选择${item.text}`"
									v-else-if="item.type == 'treeSelect'"
									v-decorator="[item.value]"
									class="w100 flex-1"
									showSearch
									allowClear
									treeNodeFilterProp="title"
									:mode="item.multiple ? 'multiple' : 'default'"
									@change="e => changeSelect(e, item.value, item)"
									:treeData="item.optionlist"
									:replaceFields="replaceFields"
								></a-tree-select>
								<a-input
									allowClear
									:placeholder="`请输入${item.text}`"
									v-else
									v-decorator="[item.value, { rules: [{ max: 50, message: '请输入' + item.text + '不超过50个字符' }], getValueFromEvent: subString }]"
									autocomplete="off"
									class="w100 flex-1"
								/>
							</a-form-item>
						</a-col>
						<template v-if="fieldList.length > len">
							<a-col v-bind="screen" v-for="(item, index) in fieldList.slice(len)" :key="item.value" v-show="advanced || showAllfieldList">
								<a-form-item :label="hasLabel ? item.text : ''">
									<a-input-number allowClear v-if="item.type == 'int' || item.type == 'number'" v-decorator="[item.value]" :min="1" class="w100 flex-1" />
									<j-date
										v-else-if="item.type == 'date'"
										v-decorator="[item.value]"
										placeholder="请选择日期"
										class="w100 flex-1"
										date-format="YYYY-MM-DD"
									></j-date>
									<j-date
										v-else-if="item.type == 'datetime'"
										v-decorator="[item.value]"
										placeholder="请选择时间"
										:show-time="true"
										date-format="YYYY-MM-DD HH:mm:ss"
										class="w100 flex-1"
									></j-date>
									<j-date
										v-else-if="item.type == 'month'"
										v-decorator="[item.value]"
										placeholder="请选择月份"
										:show-time="true"
										date-format="YYYY-MM"
										class="w100 flex-1"
									></j-date>
									<a-range-picker
										:allowClear="item.allowClear == undefined ? true : item.allowClear"
										v-else-if="item.type == 'rangeDate'"
										:disabledDate="disabledDate"
										v-decorator="[item.value]"
										:placeholder="[`${item.text}开始`, `${item.text}结束`]"
										:ranges="{ 今天: [moment(), moment()], 本月: [moment().startOf('month'), moment()] }"
										class="w100 flex-1"
									/>

									<a-select
										:placeholder="`请选择${item.text}`"
										v-else-if="item.type == 'select'"
										v-decorator="[item.value]"
										class="w100 flex-1"
										showSearch
										allowClear
										:filter-option="filterOption"
										:mode="item.multiple ? 'multiple' : 'default'"
										@change="e => changeSelect(e, item.value, item)"
									>
										<a-select-option :value="sel.value" v-for="(sel, $subindex) in item.optionlist">{{ sel.text }}</a-select-option>
									</a-select>
									<a-tree-select
										:placeholder="`请选择${item.text}`"
										v-else-if="item.type == 'treeSelect'"
										v-decorator="[item.value]"
										class="w100 flex-1"
										showSearch
										allowClear
										:mode="item.multiple ? 'multiple' : 'default'"
										@change="e => changeSelect(e, item.value, item)"
										:treeData="item.optionlist"
										:replaceFields="replaceFields"
									></a-tree-select>

									<a-input
										allowClear
										:placeholder="`请输入${item.text}`"
										v-else
										v-decorator="[item.value, { rules: [{ max: 50, message: '请输入' + item.text + '不超过50个字符' }], getValueFromEvent: subString }]"
										autocomplete="off"
										class="w100 flex-1"
									/>
									<!-- <a-tree-select :placeholder="`请选择${item.text}`"
									v-else-if="item.type == 'treeSelect'"
									v-decorator="[item.value]"
									class="w100 flex-1"
									showSearch
									allowClear
									:filter-option="filterOption"
									:mode="item.multiple ? 'multiple' : 'default'"
									@change="e => changeSelect(e, item.value, item)"
									:treeData="item.optionlist"
									:replaceFields="replaceFields"
									 ></a-tree-select> -->
								</a-form-item>
							</a-col>
						</template>
						<a-col v-bind="screen" :style="{ float: buttonAlign }" v-if="fieldList.length < len">
							<a-space class="table-page-search-submitButtons" :style="{ float: buttonAlign }">
								<a-button type="link" class="refresh" @click="reset">
									<!-- <i class="icon-refresh iconfont"></i> -->
									<img src="/img/refresh.png" style="width: 14px;margin-right: 5px;" />
								</a-button>
								<a-button class="ant-btn-primary search-btn" @click="search">
									<img src="/img/search.png" style="width: 14px;margin-right: 5px;" />
									搜索
								</a-button>
							</a-space>
						</a-col>
					</a-row>
				</a-col>
				<a-col flex="100px" :style="{ float: buttonAlign }" v-if="fieldList.length >= len">
					<a-space class="table-page-search-submitButtons" style="padding-top: 5px;" :style="{ float: buttonAlign }">
						<a-button type="link" class="refresh" @click="reset">
							<img src="/img/refresh.png" style="width: 14px;margin-right: 5px;" />
							<!-- <i class="icon-refresh iconfont"></i> -->
						</a-button>
						<a-button type="link" class="advanced" :class="{ active: advanced }" v-if="fieldList.length > len" @click="toggleAdvanced">
							<i class="icon-arrow iconfont"></i>
						</a-button>
						<a-button class="ant-btn-primary search-btn" @click="search">
							<img src="/img/search.png" style="width: 14px;margin-right: 5px;" />
							搜索
						</a-button>
					</a-space>
				</a-col>
			</a-row>
		</a-form>
	</container-query>
</template>

<script>
import moment from 'moment';
import JDate from '../JDate.vue';
import { ContainerQuery } from 'vue-container-query';
const query = {
	'screen-xs': {
		maxWidth: 575
	},
	'screen-sm': {
		minWidth: 576,
		maxWidth: 767
	},
	'screen-md': {
		minWidth: 768,
		maxWidth: 991
	},
	'screen-lg': {
		minWidth: 992,
		maxWidth: 1199
	},
	'screen-xl': {
		minWidth: 1200,
		maxWidth: 1599
	},
	'screen-xxl': {
		minWidth: 1600
	}
};
export default {
	name: 'filterbar',
	data() {
		return {
			moment,
			query,
			form: this.$form.createForm(this),
			filter: {},
			advanced: false,
			params: '',
			len: 4,
			replaceFields: { children: 'children', title: 'deptName', key: 'deptId', value: 'deptId' }
		};
	},
	props: {
		fieldList: Array,
		showAllfieldList: {
			type: Boolean,
			default: false
		},
		hasLabel: {
			type: Boolean,
			default: false
		}
	},
	computed: {
		// screen() {
		// 	let span = 12;
		// 	let len = 4;
		// 	for (var key in this.params) {
		// 		if (this.params[key]) {
		// 			switch (key) {
		// 				case 'screen-xs': {
		// 					span = 24;
		// 					len = 1;
		// 					break;
		// 				}
		// 				case 'screen-sm': {
		// 					span = 12;
		// 					len = 2;
		// 					break;
		// 				}
		// 				case 'screen-md':
		// 				case 'screen-lg': {
		// 					span = 8;
		// 					len = 3;
		// 					break;
		// 				}
		// 				case 'screen-xl':
		// 				case 'screen-xxl': {
		// 					span = 6;
		// 					len = 4;
		// 					break;
		// 				}
		// 			}
		// 			break;
		// 		}
		// 	}
		// 	this.len = len;
		// 	return {
		// 		span
		// 	};
		// },

		screen() {
			let span = 12;
			let len = 6;
			for (var key in this.params) {
				if (this.params[key]) {
					switch (key) {
						case 'screen-xs': {
							span = 24;
							len = 1;
							break;
						}
						case 'screen-sm': {
							span = 12;
							len = 2;
							break;
						}
						case 'screen-md':
						case 'screen-lg': {
							span = 8;
							len = 3;
							break;
						}
						case 'screen-xl':
						case 'screen-xxl': {
							span = 4;
							len = 6;
							break;
						}
					}
					break;
				}
			}
			this.len = len;
			return {
				span
			};
		},
		buttonAlign() {
			//return this.fieldList.length % (24 / this.screen.span) == 0 ? 'right' : 'left';
			return 'left';
		}
	},
	components: {
		JDate,
		ContainerQuery
	},

	created() {
		/* vue 实例创建成功 */
		this.$nextTick(() => {
			this.getDefaultValue();
		});
	},
	watch: {
		fieldList: {
			handler(newName, oldName) {
				this.$nextTick(() => {
					this.getDefaultValue();
				});
			},
			deep: true
			// 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
			//immediate: true
		}
	},
	methods: {
		subString(e) {
			if (e.target.value) {
				return e.target.value.trim().slice(0, 50);
				//return e.target.value.slice(0, 50);
			} else {
				return e.target.value;
			}
		},
		/*限制超过当前时间不可选*/
		disabledDate(current) {
			return current && current > moment().endOf('day');
		},
		search() {
			var keys = Object.keys(this.filter);
			var filterparam = this.removeEmptyObject(this.form.getFieldsValue(keys));
			this.$emit('handlerSearch', Object.assign({}, filterparam));
		},
		reset() {
			this.getDefaultValue();
			var filterparam = this.removeEmptyObject(this.filter);
			this.$emit('handlerReset', Object.assign({}, filterparam));
		},
		removeEmptyObject(obj) {
			let filterparam = JSON.parse(JSON.stringify(obj));
			for (var key in filterparam) {
				/* 处理时间范围格式 */
				if (typeof filterparam[key] == 'object') {
					let obj = this.fieldList.find(item => item.value == key);
					if (obj.type == 'rangeDate') {
						let dateFormat = obj.dateformat;
						if (filterparam[key] && filterparam[key].length == 2) {
							filterparam[key] = filterparam[key].map(item => moment(item).format(dateFormat || 'YYYY-MM-DD'));
						} else {
							filterparam[key] = [];
						}
					}
				}
				if (typeof filterparam[key] == 'string') {
					filterparam[key] = filterparam[key].trim();
				}
				if (typeof filterparam[key] == 'number' && filterparam[key] == -1) {
					filterparam[key] = null;
				}
			}
			return filterparam;
		},
		toggleAdvanced() {
			this.advanced = !this.advanced;
		},
		getDefaultValue() {
			this.$nextTick(() => {
				this.form.resetFields();
				this.filter = {};
				let defaultValuelist = {};
				if (this.fieldList && this.fieldList.length > 0) {
					this.fieldList.forEach(item => {
						this.filter[item.value] = item.defaultValue;
					});
				}
				this.form.setFieldsValue({
					...this.filter
				});
			});
		},
		//获取筛选条件选中或输入的值
		getFilterDefaultValue() {
			this.getDefaultValue();
			var keys = Object.keys(this.filter);
			/* var filterparam = this.removeEmptyObject(this.form.getFieldsValue(keys)); */
			var filterparam = this.form.getFieldsValue(keys);
			//console.log("过滤空数据的筛选值"+JSON.stringify(filterparam))
			return filterparam;
		},
		filterOption(input, option) {
			return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
		},
		handleChange(e) {
			console.log('e', e);
		},
		//切换下拉选项
		changeSelect(e, value, item) {
			/* console.log(JSON.stringify(e))
			console.log(JSON.stringify(value)) */
			this.$emit('changeSelect', e, value, item);
		}
	}
};
</script>

<style scoped="scoped" lang="less">
.ant-col {
	padding: 5px 0;
}
.ant-input-number,
.ant-form-inline .ant-form-item {
	width: 100%;
}
.w100 {
	width: 100%;
}
.ant-form-inline {
	/deep/ .ant-form-item {
		width: 100%;
		display: flex;
		align-items: center;
		.ant-form-item-control-wrapper {
			flex: 1;
			.ant-form-item-control {
				line-height: 1;
			}
			/deep/ .ant-calendar-picker {
				width: 100%;
			}
		}

		.ant-form-item-label {
			white-space: normal;
			line-height: 1;
			min-width: 6em !important;
		}
	}
}
.ant-btn-yellow {
	color: #fff;
	background-color: #f8ac59;
	border-color: #f8ac59;
}
.ant-btn-yellow:hover {
	background-color: rgba(248, 172, 89, 0.8);
	border-color: rgba(248, 172, 89, 0.8);
	color: #fff;
}

.ant-btn-yellow:focus,
.ant-btn-yellow.active {
	background-color: rgba(248, 172, 89, 1);
	border-color: rgba(248, 172, 89, 1);
	color: #fff;
}
.ant-btn-blue {
	color: #fff;
	background-color: #3b74f8;
	border-color: #3b74f8;
}

.ant-btn-blue:hover {
	background-color: #3b74f8;
	border-color: #3b74f8;
	color: #fff;
}

.ant-btn-blue:focus,
.ant-btn-blue.active {
	background-color: #3b74f8;
	border-color: #3b74f8;
	color: #fff;
}
#app .ant-btn.refresh,
#app .ant-btn.advanced {
	color: #b3b3b3;
	font-size: 16px;
	min-width: 0;
	width: 20px;
	padding: 0;
}
#app .ant-btn.advanced {
	transform: rotate(90deg);
	transform: all 0.3s;
	&.active {
		transform: rotate(-90deg);
	}
}
.search-btn {
	/* color: @primary-color;
	border: 1px solid @primary-color; */
	border-radius: 4px;
	width: 68px;
	height: 32px;
	font-size: 14px;
	/* &:hover,
	&:active {
		background: @primary-color;
		color: #fff;
	} */
}
</style>
